//公车详细页面
import React, { Component } from 'react';
import {
    View,
    Text,
    ScrollView,
} from 'react-native';


import Icon from 'react-native-vector-icons/Ionicons';
import { mapbusStyle as styles } from '../../../styles';
import Bus_route from './busroute'
import { RouteModule } from 'rn-ai-baidu-map';

var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;

export default class Busin_list extends Component {

    constructor(props) {
        super(props)
        this.state = {
            theLine:0
        }
    }


    render() {
        return (
            <View style={styles.busin}>
                <ScrollView
                    onMomentumScrollEnd={(e)=>{
                        this._setLine(e.nativeEvent.contentOffset.x/width)
                        }}
                    //是否展示水平指示器
                    showsHorizontalScrollIndicator={false}
                    //滚动条是否停在滚动视图的尺寸的整数倍位置
                    pagingEnabled={true}
                    //ScrollView 的滑动方向
                    horizontal={true}>
                    {this.rendBody()}
                </ScrollView>
            </View>
        );
    }


    _setLine(index){
        RouteModule.toNavigation("hct", index);
    }

    rendBody() {
        //数组
        var allChild = [];
        var colors = []
        if(this.props.Lines){
            colors = this.props.Lines;
        }
        for (let i = 0; i < colors.length; i++) {
            if(colors[i].time){
                let entrance = "";
                allChild.push(
                    <View key={i} style={[styles.busiall, { width: width }]}>
                        {colors[i].transitSteps.map((item,index)=>{
                            if(entrance=="")entrance = item.departureStation
                            return(
                                <View key={index} style={styles.businnum}>
                                    {this._renderIcon(item.stepType)}
                                    <Text style={styles.businbus}>{item.entrance}</Text>
                                </View>
                            )
                        })}
                        <View style={styles.busintext}>
                            <Text style={styles.busintext1}>{entrance}出发</Text>
                            <Text style={styles.busintext1}>预计{colors[i].time}到达</Text>
                            {/* <Text style={styles.busintext1}>步行{walkWay}米</Text> */}
                        </View>
                        {/* <View style={[styles.businboto, { flex: 1 }]}>
                            <Text style={styles.businbot}>{i}</Text>
                        </View> */}
                        <Text style={styles.gomore}>路线详情</Text>
                        <Bus_route steps={colors[i].transitSteps}/>
                    </View>
                )
            }else{
                let walkWay = 0;
                let stationNum = 0;
                let entrance = "";
                let steps = [];
                if(colors[i].transitSteps){
                    for(let j =0;j<colors[i].transitSteps.length;j++){
                        if(colors[i].transitSteps[j].stepType=="WAKLING"){
                            walkWay += colors[i].transitSteps[j].distance
                        }else{
                            if(entrance=="")entrance = colors[i].transitSteps[j].entrance
                            stationNum += colors[i].transitSteps[j].vehiclePassStationNum
                            steps.push(colors[i].transitSteps[j]);
                        }
                    }
                }
                allChild.push(
                    <View key={i} style={[styles.busiall, { width: width }]}>
                        {steps.map((item,index)=>{
                            return(
                                <View key={index} style={styles.businnum}>
                                    {this._renderIcon(item.stepType)}
                                    <Text style={styles.businbus}>{item.vehicleName}</Text>
                                </View>
                            )
                        })}
                        <View style={styles.busintext}>
                            <Text style={styles.busintext1}>{(colors[i].duration/60).toFixed(0)}分钟</Text>
                            <Text style={styles.busintext1}>共{stationNum}站</Text>
                            <Text style={styles.busintext1}>步行{walkWay}米</Text>
                        </View>
                        {/* <View style={[styles.businboto, { flex: 1 }]}>
                            <Text style={styles.businbot}>{i}</Text>
                        </View> */}
                        <Text style={styles.gomore}>路线详情</Text>
                        <Bus_route steps={colors[i].transitSteps}/>
                    </View>
                )
            }
        }

        return allChild;
    }

    _renderIcon(stepType){
        if(stepType=="ESTEP_BUS"||stepType=="ESTEP_COACH"||stepType=="BUSLINE"){//公交、巴士
            return(
                <Icon
                    name={'md-bus'}
                    size={25}
                    color={'#3d9ccc'} style={styles.businicon} />
            )
        }else if(stepType=="ESTEP_TRAIN"){//火车
            return(
                <Icon
                    name={'md-train'}
                    size={25}
                    color={'#3d9ccc'} style={styles.businicon} />
            )
        }else if(stepType=="ESTEP_PLANE"){//飞机
            return(
                <Icon
                    name={'md-plane'}
                    size={25}
                    color={'#3d9ccc'} style={styles.businicon} />
            )
        }else if(stepType=="ESTEP_DRIVING"){//驾车
            return(
                <Icon
                    name={'md-car'}
                    size={25}
                    color={'#3d9ccc'} style={styles.businicon} />
            )
        }else if(stepType=="ESTEP_WALK"||stepType=="WAKLING"){//步行
            return(
                <Icon
                    name={'md-walk'}
                    size={25}
                    color={'#3d9ccc'} style={styles.businicon} />
            )
        }else if(stepType=="SUBWAY"){//地铁
            return(
                <Icon
                    name={'md-subway'}
                    size={25}
                    color={'#3d9ccc'} style={styles.businicon} />
            )
        }
    }
}